<template>
	<div class="room-area">
		<area-header :title="areaData.title" :subtitle="areaData.subtitle" />

		<div class="room-list">
			<template v-for="item in areaData.list" :key="item.id">
				<room-item :itemData="item"></room-item>
			</template>
		</div>
	</div>
</template>

<script setup>
	import AreaHeader from './AreaHeader.vue'
	import RoomItem from './RoomItem.vue'

	defineProps({
		areaData: {
			type: Object,
			default: () => ({}),
		},
	})
</script>

<style lang="less" scoped>
	.room-list {
		display: flex;
		flex-wrap: wrap;
		margin: 20px -8px;
	}
</style>
